<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" id="viewport"
	content="width=device-width,
	height=device-height, initial-scale=1.0, maximum-scale=1.0,
	user-scalable=no" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" charset="utf-8"
	src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/functions.js"></script>
<script type="text/javascript" charset="utf-8"
	src="js/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" charset="utf-8"
	src="js/cordova-2.5.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/ContactView.js"></script>
<script type="text/javascript" charset="utf-8" src="js/ImageView.js"></script>
<script type="text/javascript" charset="utf-8" src="js/video.js"></script>
<script type="text/javascript" charset="utf-8" src="js/twitter.js"></script>
<script type="text/javascript" charset="utf-8"
	src="https://maps.google.com/maps/api/js?sensor=false"></script>
<title>Hello World</title>
</head>
<body onload="onBodyLoad()">
	<section data-role="page" id="home">
		<div data-role="header" data-position="fixed">
			<h1>Mi Blog Personal</h1>
		</div>
		<div data-role="content">
			<a id="buttonNewEntry" href="#newEntry" data-role="button">Crear
				nueva entrada</a> <a id="buttonListTable" href="#listTable"
				data-role="button">Listar entradas</a>
			<div align="center">
				<img src="img/icon.png" />
			</div>
		</div>
	</section>

	<section data-role="page" id="newEntry">
		<div data-role="header" data-position="fixed">
			<h1>Nueva entrada</h1>
			<a data-rel="back" data-icon="back">Volver</a> <a href="#home"
				data-direction="reverse" data-icon="home">Inicio</a>
		</div>
		<div data-role="content">
			<form>
				<div data-role="fieldcontain">
					<label for="title" class="ui-hidden-accessible">Título</label> <input
						id="title" type="text" placeholder="Título" />
				</div>
				<div data-role="fieldcontain">
					<label for="description" class="ui-hidden-accessible">Contenido</label>
					<textarea id="content" placeholder="Contenido"></textarea>
				</div>
				<div data-role="fieldcontain">
					<div class="ui-grid-a">
						<div class="ui-block-a">
							<a href="#addImage" data-role="button">+ Image</a>
						</div>
						<div class="ui-block-b">
							<p id="fileImage"></p>
						</div>
						<div class="ui-block-a">
							<a href="#addVideo" data-role="button">+ Video</a>
						</div>
						<div class="ui-block-b">
							<p id="fileVideo"></p>
						</div>
					</div>
				</div>
				<div data-role="fieldcontain">
					<label for="friends" class="select">Amigos etiquetados</label> <select
						name="friends" id="friends" multiple="multiple"
						data-native-menu="true">
					</select>
				</div>
			</form>
			<div class="ui-grid-a">
				<div class="ui-block-a">
					<a data-rel="back" data-role="button">Cancelar</a>
				</div>
				<div class="ui-block-b">
					<a href="#save" data-role="button">Guardar</a>
				</div>
			</div>
		</div>
	</section>

	<section data-role="page" id="listTable">
		<div data-role="header" data-position="fixed"
			data-id="headerListEntries">
			<h1>Listado del Blog</h1>
			<a data-rel="back" data-icon="back">Volver</a> <a href="#home"
				data-direction="reverse" data-icon="home">Inicio</a>
		</div>
		<div data-role="content">
			<ul id="entryList" data-role="listview" data-filter="true"
				data-inset="true" data-split-icon="delete">
			</ul>
		</div>
		<div data-role="footer" data-position="fixed"
			data-id="footerListEntries">
			<div data-role="navbar">
				<ul>
					<li><a href="#listTable" data-transition="fade"
						class="ui-state-persist">Modo Tabla</a></li>
					<li><a href="#listBlog" data-transition="fade">Modo Blog</a></li>
				</ul>
			</div>
		</div>
	</section>

	<section data-role="page" id="listBlog">
		<div data-role="header" data-position="fixed"
			data-id="headerListEntries">
			<h1>Listado del Blog</h1>
			<a data-rel="back" data-icon="back">Volver</a> <a href="#home"
				data-direction="reverse" data-icon="home">Inicio</a>
		</div>
		<div data-role="content">
			<ul id="entryList" data-role="listview" data-filter="true"
				data-inset="true">
			</ul>
		</div>
		<div data-role="footer" data-position="fixed"
			data-id="footerListEntries">
			<div data-role="navbar">
				<ul>
					<li><a href="#listTable" data-transition="fade">Modo Tabla</a></li>
					<li><a href="#listBlog" data-transition="fade"
						class="ui-state-persist">Modo Blog</a></li>
				</ul>
			</div>
		</div>
	</section>

	<section data-role="page" id="showEntry">
		<div data-role="header" data-position="fixed">
			<h1>Entrada del Blog</h1>
			<a data-rel="back" data-icon="back">Volver</a> <a href="#home"
				data-direction="reverse" data-icon="home">Inicio</a>
		</div>
		<div data-role="content" id="content"></div>
	</section>

	<section data-role="page" id="showMap">
		<div data-role="header" data-position="fixed" data-fullscreen="true">
			<h1>Ubicación</h1>
			<a data-rel="back" data-icon="back">Volver</a> <a href="#home"
				data-direction="reverse" data-icon="home">Inicio</a>
		</div>
		<div data-role="content" id="map_canvas"></div>
	</section>
</body>
</html>
